<script setup lang="ts">
  import routeComponentName from '@/config/route-component-name'
  import { ref } from 'vue'
  import SyncModal from './components/sync-modal.vue'
  import { SyncMode } from './types'

  defineOptions({
    name: routeComponentName.appCenter.baseDataSync,
  })

  const apiList = ref<
    Array<{
      name: string
      direction: string
      typeName: string
      type: SyncMode
      showSyncBtn: boolean
    }>
  >([
    {
      name: '条码信息',
      direction: '同步',
      typeName: '基础资料',
      type: 'sn-code',
      showSyncBtn: true,
    },
    {
      name: '物料信息',
      direction: '同步',
      typeName: '基础资料',
      type: 'spare-part',
      showSyncBtn: true,
    },
    {
      name: '客户信息',
      direction: '同步',
      typeName: '基础资料',
      type: 'customer',
      showSyncBtn: true,
    },
    {
      name: '经销商销售出库金额',
      direction: '同步',
      typeName: '每天02:00自动同步',
      type: 'network_amount',
      showSyncBtn: false,
    },
  ])

  const snCodeSyncModalVisible = ref(false)
  const currentSyncMode = ref<SyncMode>('sn-code')

  const handleSyncClick = (type: SyncMode) => {
    snCodeSyncModalVisible.value = true
    currentSyncMode.value = type
  }
</script>

<template>
  <div class="base-data-sync-page">
    <div class="content">
      <div class="title">对接列表</div>
      <el-table :data="apiList" :border="true" :stripe="true">
        <el-table-column label="序号" type="index" width="50" fixed="left" :align="'center'" />
        <el-table-column label="接口名称" prop="name" min-width="140" />
        <el-table-column label="对接方向" prop="direction" width="200" />
        <el-table-column label="数据类型" prop="typeName" width="200" />
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <h-link v-if="row.showSyncBtn" @click="handleSyncClick(row.type)">同步</h-link>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <sync-modal v-model="snCodeSyncModalVisible" :type="currentSyncMode" />
  </div>
</template>

<style scoped lang="scss">
  .base-data-sync-page {
    width: 100%;
    height: calc(100vh - 92px);
    box-sizing: border-box;
    padding: 12px;

    .content {
      background-color: #fff;
      width: 100%;
      height: 100%;
      padding: 12px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      row-gap: 4px;

      .title {
        font-size: 14px;
        padding-left: 5px;
        border-left: 3px solid #007cff;
        font-weight: bold;
      }
    }
  }
</style>
